<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-我的订单</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="top-bar">
            <div class="nav-bar">
                <h3 class="page-title">客户订单</h3>
                <a class="nav-btn fl" href="/my.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a>
            </div>
        </div>
        <div class="orders-con">
            <ul class="orders-list">
                
            </ul>
            <script id="orders-list-tmpl" type="text/html">
                {{if orders}}
                {{each orders as order}}
                <li order-id={{order.order_id}}>
                    <div class="order-title">
                        <h3>订单编号：{{order.no}}</h3>
                        {{if order.status == 0}}
                        <div class="fr order-operate">
                            <button type="button" class="btn btn-success order-accept" data-toggle="modal"
                                data-target="#accept-modal">接单</button>
                            <button type="button" class="btn btn-danger order-reject" data-toggle="modal"
                                data-target="#reject-modal">拒单</button>
                        </div>
                        {{/if}}
                    </div>
                    <div class="order-content">
                        <img src="{{order.index_image}}">
                        <div class="order-text">
                            <h3>{{order.title}}</h3>
                            <ul>
                                <li>创建时间：{{order.ctime}}</li>
                                <li>入住日期：{{order.begin_date}}</li>
                                <li>离开日期：{{order.end_date}}</li>
                                <li>合计金额：￥{{order.amount}}(共{{order.days}}晚)</li>
                                <li>订单状态：
                                    <span>
                                        {{if 0 == order.status}}
                                        待接单
                                        {{else if 3 == order.status}}
                                        待评价
                                        {{else if 4 == order.status}}
                                        已完成
                                        {{else if 6 == order.status}}
                                        已拒单
                                        {{/if}}
                                    </span>
                                </li>
                                {{if 4 == order.status}}
                                <li>客户评价： {{order.comment}}</li>
                                {{else if 6 == order.status}}
                                <li>拒单原因： {{order.comment}}</li>
                                {{/if}}
                            </ul>
                        </div>
                    </div>
                </li>
                {{/each}}
                {{/if}}
            </script>
            <div class="modal fade" id="accept-modal" tabindex="-1" role="dialog" aria-labelledby="accept-label">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">操作提示</h4>
                        </div>
                        <div class="modal-body">
                            <p>您确定接此订单吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary modal-accept">确定接单</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="reject-modal" tabindex="-1" role="dialog" aria-labelledby="reject-label">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">请输入拒接单原因</h4>
                        </div>
                        <div class="modal-body">
                            <textarea class="form-control" rows="3" id="reject-reason"
                                placeholder="此处必须填写原因"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary modal-reject">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
        </div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="/static/js/template.js"></script>
    <script>
        //模态框居中的控制
        function centerModals() {
            $('.modal').each(function (i) {   //遍历每一个模态框
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 0 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 30);  //修正原先已经有的30个像素
            });
        }

        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        $(document).ready(function () {
            $('.modal').on('show.bs.modal', centerModals);      //当模态框出现的时候
            $(window).on('resize', centerModals);
            // 查询房东的订单
            $.get("/api/v1/user/orders?role=landlord", function (resp) {
                if ("0" == resp.errno) {
                    $(".orders-list").html(template("orders-list-tmpl", { orders: resp.data.orders }));
                    $(".order-accept").on("click", function () {
                        var orderId = $(this).parents("li").attr("order-id");
                        $(".modal-accept").attr("order-id", orderId);
                    });
                    // 接单处理
                    $(".modal-accept").on("click", function () {
                        var orderId = $(this).attr("order-id");
                        $.ajax({
                            url: "/api/v1/orders/" + orderId + "/status",
                            type: "PUT",
                            data: '{"action":"accept"}',
                            contentType: "application/json",
                            dataType: "json",
                            headers: {
                                "X-CSRFTOKEN": getCookie("csrf_token"),
                            },
                            success: function (resp) {
                                if ("4001" == resp.errno) {
                                    location.href = "/login.html";
                                } else if ("0" == resp.errno) {
                                    $(".orders-list>li[order-id=" + orderId + "]>div.order-content>div.order-text>ul li:eq(4)>span").html("已接单");
                                    $("ul.orders-list>li[order-id=" + orderId + "]>div.order-title>div.order-operate").hide();
                                    $("#accept-modal").modal("hide");
                                }
                            }
                        })
                    });
                    $(".order-reject").on("click", function () {
                        var orderId = $(this).parents("li").attr("order-id");
                        $(".modal-reject").attr("order-id", orderId);
                    });
                    // 处理拒单
                    $(".modal-reject").on("click", function () {
                        var orderId = $(this).attr("order-id");
                        var reject_reason = $("#reject-reason").val();
                        if (!reject_reason) return;
                        var data = {
                            action: "reject",
                            reason: reject_reason
                        };
                        $.ajax({
                            url: "/api/v1/orders/" + orderId + "/status",
                            type: "PUT",
                            data: JSON.stringify(data),
                            contentType: "application/json",
                            headers: {
                                "X-CSRFTOKEN": getCookie("csrf_token")
                            },
                            dataType: "json",
                            success: function (resp) {
                                if ("4101" == resp.errno) {
                                    location.href = "/login.html";
                                } else if ("0" == resp.errno) {
                                    $(".orders-list>li[order-id=" + orderId + "]>div.order-content>div.order-text>ul li:eq(4)>span").html("已拒单");
                                    $("ul.orders-list>li[order-id=" + orderId + "]>div.order-title>div.order-operate").hide();
                                    $("#reject-modal").modal("hide");
                                }
                            }
                        });
                    })
                }else if(resp.errno == "4001"){
                    location.href = "/login.html";
                }
            });
        });
    </script>
</body>

</html>